Vue.component('my-header', {
    props: ['isLogin','value'],
    template:`
    <el-menu
        class="el-menu-demo"
        mode="horizontal"
        background-color="#409EFF"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-menu-item><a href="/index.html">首页</a></el-menu-item>
        <templcate v-if="isLogin">
            <el-menu-item><a href="/userinfo.html">我的信息</a></el-menu-item>
            <el-menu-item><a href="/articles.html">我的博客</a></el-menu-item>
            <el-menu-item index="logout"><a @click="logout">退出登录</a></el-menu-item>
        </templcate>
        <el-menu-item v-else><a href="/login.html">登录</a></el-menu-item>
        <div class="search-bar" v-if="!isUserPage()" >
            <el-button @click="$emit('search-article')"><i class="el-icon-search">搜索</i></el-button>
            <input style="width: 300px;height: 30px" placeholder="输入你想搜索的内容吧" v-model="keyWord"  @keyup.enter="searchArticle">
        </div>
    </el-menu>
    `,
    data() {
        return {
            keyWord: ''
        }
    },
    methods: {
        async searchArticle(page = 1) {
            this.loading = true
            try {
                keyword = this.keyWord
                const info = (await axios(Api.getArticleListByKeyWord(this.userId, keyword, page))).data
                this.searching = true
                this.editing = false
                this.loading = false
                this.articleInfo = info
            } catch(e) {
                this.loading = false
                if(e.response) {
                    this.$alert(e.response.data.message)
                }else {
                    this.$alert("网络错误")
                }
            }
        },
        logout() {
            axios(Api.logout()).then(e => {
                this.$message('退出成功')
                setTimeout( () => {
                    location.href = '/login.html'
                },400)
            })
        },
        isUserPage() {
            return location.pathname == "/userinfo.html"
        }
    }
})